<template>
  <div>
    <el-dialog :loading="loading" width="20%" title="分配角色" :visible.sync="dialog" @closed="$emit('closed')">
      <RoleTreeSee ref="roleTree"></RoleTreeSee>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import RoleTreeSee from "@/components/RoleTreeSee";
import { allocationRoles } from "@/api/user";
export default {
  data() {
    return {
      dialog: false,
      loading: false,
      userId: null
    };
  },
  methods: {
    open(userId) {
      this.userId = userId;
      this.dialog = true;
      this.$refs.roleTree.getTreeRef().setCheckedKeys([]);
    },
    close() {
      this.dialog = false;
    },
    submit() {
      if (!this.loading) {
        this.loading = true;
        allocationRoles(
          this.userId,
          this.$refs.roleTree
            .getTreeRef()
            .getCheckedKeys()
            .join(",")
        )
          .then(res => {
            this.loading = false;
            this.close();
          })
          .catch(err => {
            this.loading = false;
            this.close();
          });
      }
    }
  },
  components: {
    RoleTreeSee
  }
};
</script>